<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证手机号码</title>
</head>

<body>
    <!-- 焦点 -->
    <input type="text" id="focus" value="" placeholder="请输入手机号码" />
    <span></span>
    <!-- change事件 -->
    <select name="" id="sel">
          <option value="苹果">苹果</option>
          <option value="葡萄">葡萄</option>
          <option value="香蕉">香蕉</option>
          <option value="菠萝">菠萝</option>
          <option value="桃子">桃子</option>
      </select>
    <script>
        let focus = document.getElementById("focus");
        focus.onfocus = function() {
            console.log("触发获得焦点");
        };
        focus.onblur = function() {
            //正则表达式
            let reg = /^1[345789]\d{9}$/;
            //正则验证
            if (reg.test(focus.value)) {
                //自己的下一个兄弟
                this.nextElementSibling.innerHTML = "√"; //span
                this.nextElementSibling.style.color = "green"
            } else {
                this.nextElementSibling.innerHTML = "×";
                this.nextElementSibling.style.color = "red"
            }
            console.log("触发失去焦点")
        }

        //change事件
        let sel = document.getElementById("sel");
        sel.onchange = function() {
            console.log(this.value)
        }
    </script>
</body>

</html>